<#include "../common/header.htm">
<div class="content-wrapper">
    <section class="content">
        <div class="row">
            <div id="searchResultContent">
                <div class="searchResult">搜索结果</div>
                <iframe name="iframe"  class="iframe-wrap" frameborder="0" scrolling="no"></iframe>
                <div class="searchResulmu">
                    </div>
                    <el-tabs v-model="editableTabsValue" type="card"  @tab-remove="removeTab" @tab-click="handleClick">
                        <el-tab-pane
                                v-for="(item, index) in editableTabs"
                                :key="item.name"
                                :label="item.title"
                                :name="item.name"
                                :closable="item.closable"
                        >
                            <div v-if="item.name!=0">
                                <div class="searchResultLeft" id="bannerbg">
                                    <el-tree :data="treelist" :props="defaultProps" @node-click="handleNodeClick">
                                    </el-tree>
                                </div>
                                <div class="searchResultRight">
                                    <el-table

                                            ref="multipleTable"
                                            :data="detailList"
                                            tooltip-effect="dark"
                                            :row-key="getRowKeys"
                                            style="width: 100%"
                                            @selection-change="handleSelectionChange">
                                        <el-table-column
                                                :reserve-selection="true"
                                                prop="vid"
                                                type="selection"
                                                width="55">
                                        </el-table-column>
                                        <el-table-column label="全选">
                                            <template slot-scope="scope">
                                                <span v-for="(value, key, index) in scope.row" v-if="key!='vid'">
                                                    {{key}}:
                                                    <span v-html="value"></span> &nbsp;&nbsp;&nbsp;&nbsp;
                                                </span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div style="right: 115px;" class="exportSedBtn" @click="exportSorl(0)">导出选中</div>
                                    <div class="exportSedBtn" @click="exportSorl(1)">全部导出</div>
                                    <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="currentPage"
                                            :page-sizes="[20, 50, 100, 200]"
                                            :page-size="pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="total">
                                    </el-pagination>
                                </div>
                            </div>
                            <div v-else>
                               <div v-html="item.url"></div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
    </section>
</div>
<script src="${ctx}/bower_components/vue/common/shuiyin.js"></script>
<script>
    /*function findDimensions() {
        //获取窗口高度
        let winHeight;
        if (window.innerHeight)
            winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
            winHeight = document.body.clientHeight;
        $(".searchResultLeft").css("height",(winHeight-210)+"px");
    }
    findDimensions();
    window.onresize=findDimensions;*/

    function refreshSize(){
        var totolHeight =  document.documentElement.clientHeight;
        var height = totolHeight - 100;
        console.log(totolHeight + ' - ' + height);
        document.getElementById('bannerbg').style.height = height+'px';
    };
    refreshSize();
    window.onresize = refreshSize;

    let keyword = '${keyword}';
    let username = '${username}';
    window.onload=function () {
        searchResult.addTab(keyword)
        searchResult.tabtree()
        watermark({watermark_txt0:'一键搜大数据系统',watermark_txt1:username,watermark_txt2:getTime()});
    }
    var searchResult=new Vue({
        el:"#searchResultContent",
        data:{
            editableTabsValue: keyword,
            editableTabs: [
                {
                    title: '一键搜',
                    name: '0',
                    closable:false,
                    url:"<iframe width='100%' height='620px' style='border:none;margin-top: -148px'  src='${ctx}/onekey_solr/oneIndexInit'></iframe>",
                }],
            currentPage: 1,
            pageSize:20,
            total:0,
            getRowKeys(row) {// 获取row的key值
                return row.vid;
            },
            treelist:[],
            detailList:[],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            multipleSelection:[],
            tablename:""
        } ,
        created:function () {

        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
                this.editableTabsValue = tab.name;
                if(this.editableTabsValue!="0"){
                    this.tabtree()
                }
            },
            handleSelectionChange(row){
                this.multipleSelection=[]
                for (let i = 0; i < row.length; i++) {
                    this.multipleSelection.push(row[i].vid)
                }
                console.log("全选的vid》》》"+this.multipleSelection)
            },
            handleNodeClick(data) {
                this.tablename=data.tablename
                this.getdetail(this.editableTabsValue,data.tablename);
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.getdetail(this.editableTabsValue,this.tablename)
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.getdetail(this.editableTabsValue,this.tablename)

            },
            addTab(targetName) {
                for (let i = 0; i < this.editableTabs.length; i++) {
                    if (this.editableTabs[i].name==targetName) {
                        this.editableTabsValue = targetName;
                        return;
                    }
                }
                this.editableTabs.push({
                    title: targetName,
                    name: targetName,
                    closable:true
                });
                this.editableTabsValue = targetName;
                $("#bblock").hide()
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                this.tabtree()
            },
            tabtree(){
                axios.post('${ctx}/onekey_solr/facet','keyword='+this.editableTabsValue).then(function (response) {
                    searchResult.treelist=response.data.data
                    // console.log("树的数据：》》",searchResult.treelist)
                   if (searchResult.treelist[0]) {
                       searchResult.tablename=searchResult.treelist[0].tablename
                       searchResult.getdetail(searchResult.editableTabsValue,searchResult.treelist[0].tablename)
                   }else{
                       searchResult.detailList=[]
                       searchResult.total=0
                   }
                })
            },
            getdetail(editableTabsValue,tablename) {
                const data = new URLSearchParams();
                data.append("keyword", editableTabsValue);
                data.append("tablename", tablename);
                axios.post('${ctx}/onekey_solr/findData/'+this.currentPage+"/"+this.pageSize,data).then(function (result) {
                    searchResult.detailList=result.data.data.rows
                    searchResult.total=result.data.data.total
                })
            },
            exportSorl(type){
                var xhr = new XMLHttpRequest();
                var url="${ctx}/onekey_dataSource/export";
                xhr.open('POST', url, true);
                xhr.responseType = "blob";  // 返回类型blob
                // 定义请求完成的处理函数
                xhr.onload = function (e) {
                    // 请求完成
                    if (this.status === 200) {
                        var content = this.response;
                        var aTag = document.createElement('a');
                        var blob = new Blob([content]);
                        var headerName = xhr.getResponseHeader("Content-disposition");
                        var fileName = decodeURIComponent(headerName).substring(20);
                        aTag.download = fileName;
                        aTag.href = URL.createObjectURL(blob);
                        aTag.click();
                        URL.revokeObjectURL(blob);
                    }
                };
                // 发送ajax请求 post请求的时候利用FormData的方式传参
                var formdata=new FormData();
                let ids = ""
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    ids+=this.multipleSelection[i]+",";
                }
                if (ids){
                    ids=ids.substring(0,ids.length-1)
                }else if (type==0&&!ids) {
                    toastr.error("请选择数据");
                    return
                }
                if (!this.tablename) {
                    toastr.error("请选择左侧模板");
                    return
                }
                formdata.append("ids",ids);
                formdata.append("type",type);
                formdata.append("tableName",this.tablename);
                xhr.send(formdata);
            }
        }
    })


    //划词功能
    let workType = false; //当前划词状态
    let workTool = false; //当前取词状态
    document.onmousedown = function(event) {        //监听当前页面鼠标按下事件
        var event = event || window.event;            //此处考虑兼容问题
        if ((event.button == "0" || event.button == "1") && !workTool) { //判断按下的按键（0）
            if (workTool) { //如果用户在取词则不进行二次划词操作
                return 0;
            }
            if (document.getElementById("bblock") && !workTool) {
                document.body.removeChild(document.getElementById("bblock"));
            }
            workType = true;
            document.onmouseup = function(event) { //监听页面中鼠标抬起事件
                if (workType) {
                    workType = false;
                    //谷歌等内核浏览器获取方式  OR  IE普通内核
                    var txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;
                    txt = txt + "";
                    txt = txt.replace(/^\s+|\s+$/g, "");
                    if (txt != "") {
                        creatDiv(txt);
                    }
                }
            }
        }
    }
    function mousePosition(evt) { //当前鼠标位于页面位置
        evt = evt || window.event;
        var xPos = evt.pageX || evt.clientX || evt.offsetX || evt.x;
        var yPos = evt.pageY || evt.clientY || evt.offsetY || evt.y;
        return [xPos, yPos];
    }
    //接下来需要在选中文字后追加一个div方便用户复制百度文库文字，那么我们可以将其封成一个方法，只要将上面那一步获取到的字符串传入即可
    function creatDiv(str) {
        var arr = mousePosition();
        var newDiv = document.createElement('div'); //创建一个div元素；
        var btn = document.createElement("button");
        btn.innerText="搜索";
        btn.keyword=str
        /** 给按钮添加绑定事件 **/
        btn.addEventListener("click",addSearch);
        newDiv.appendChild(btn);
        newDiv.id = "bblock";
        newDiv.style.width = "44px";
        newDiv.style.background = "red";
        newDiv.style.position = "absolute";
        newDiv.style.left = arr[0] + 20 + "px";
        newDiv.style.top = arr[1]+ 0  + "px";
        newDiv.style.zIndex = "1000";
        var bo = document.body; //获取body对象
        bo.insertBefore(newDiv, bo.lastChild); //动态插入到body中
        bingDiv();
    }
    //根据之前给的ID监听鼠标是否离开窗口，如果在则设置workTool为ture
    function bingDiv() {
        document.getElementById("bblock").onmouseover = function() {
            workTool = true;
        }
        document.getElementById("bblock").onmouseout = function() {
            workTool = false;
        }
    }
    /** 绑定事件 **/
    function addSearch(e) {
        let keyword=e.target.keyword;
        console.log(keyword)
        searchResult.addTab(keyword)
        searchResult.tabtree()
    }


</script>
<style>
    .wrapper {
        height: auto;
    }
    .exportAllBtn {
        position: absolute;
        top: 82px;
        left: 376px;
        border: 1px solid #4595ec;
        background: #4595ec;
        color: white;
        width: 80px;
        height: 34px;
        border-radius: 4px;
        text-align: center;
        line-height: 34px;
        cursor: pointer;
    }
    .exportSedBtn {
        position: absolute;
        top: 82px;
        right: 20px;
        border: 1px solid #4595ec;
        background: #4595ec;
        color: white;
        width: 70px;
        height: 34px;
        border-radius: 4px;
        text-align: center;
        line-height: 34px;
        cursor: pointer;
    }
    iframe.iframe-wrap {
        width: 100%;
        position: fixed;
    }
    .oneKeyBtn {
        width: 125px;
        height: 42px;
        background: #3385FF;
        position: fixed;
        top: 165px;
        line-height: 42px;
        text-align: center;
        font-size: 14px;
        color: white;
    }
    .el-tabs__header {
        position: fixed;
        top: 50px;
        z-index: 9;
        background-color: white;
        width: 100%;
    }
    .el-table.el-table--fit.el-table--enable-row-hover.el-table--enable-row-transition {
        margin-top: 82px;
    }
    .infoContent {
        margin-top: 25px;
    }
    div#singKu {
        float: left;
        line-height: 80px;
        margin-left: 16px;
        margin-right: 20px;
    }
    .searchResultRight {
        margin-left: 250px;
        margin-top: -82px;
        margin-right: 6px;
    }
    .bill-buttonarea .btn {
        width: 70px;
        height: 32px;
        font-size: 14px;
    }
    .allInp {
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        background-color: #EEF1F8;
        border: 1px solid #DDDDDD;
    }
    input.exportBtn {
        width: 70px;
        height: 34px;
        line-height: 34px;
        background-color: #4595EC;
        box-shadow: none;
        border-color: #4595ec;
        border-style: none;
        color: white;
        margin-top: 8px;
        margin-right: 15px;
        border-radius: 3px;
    }
    input.allCheck {
        width: 16px;
        height: 16px;
    }
    .singInp {
        overflow: hidden;
        height: 80px;
        border: 1px solid #DDDDDD;
        border-top: none;
    }
    span.allGo {
        font-size: 16px;
        margin-left: 10px;
    }
    .allheader {
        float: left;
        margin-left: 16px;
    }
    input.exportBtn {
        float: right;
    }
    .el-tree-node__content>.el-tree-node__expand-icon {
        padding: 0;
    }
    .searchResultLeft {
        position: fixed;
        top: 85px;
        width: 240px;
        height: 715px;
        overflow-y: auto;
        background: #F8F8F8;
    }
    .el-tab-pane {
        width: 100%;
        margin-top: 154px;
    }
    .el-tree {
        cursor: default;
        background: #F8F8F8;
        border: none;
        /*overflow-y: scroll;*/
    }
    .content {
        padding: 0;
    }
    .row{
        margin: 20px 0 0 0;
    }
    .searchResulmu li{
        display: inline-block;
        cursor: pointer;
    }
    .el-pagination {
        margin-top: 10px;
    }
    span.el-icon-close {
        margin-right: 23px;
        font-size: 12px;
    }
    .searchResult {
        height: 51px;
        width: 100%;
        line-height: 48px;
        font-size: 16px;
        background: #F8F8F8;
        padding-left: 20px;
        position: fixed;
        z-index: 9;
        margin-top: -30px;
    }
    ul.searchResulmu {
        padding: 10px;
        margin-bottom: 0;
    }

</style>